<style scoped>
	.layout {
		border: 1px solid #d7dde4;
		background: #f5f7f9;
		position: relative;
		border-radius: 4px;
		overflow: hidden;
	}
	
	.layout-content {
		height: 750px;
		margin: 15px;
		overflow: hidden;
		background: #fff;
		border-radius: 4px;
		overflow: scroll;
	}
	
	.layout-menu-left {
		font-weight: 600;
		height: 730px;
		overflow: scroll;
	}
</style>
<template>
	<div>
		<div class="layout ">
			<Row type="flex">
				<Col class="layout-menu-left" :span="spanLeft">
				<br>
				<Tree :data="data1" @on-select-change='onSelect'></Tree>
				<br>
				<Col span="20" offset='4'>
				<Button type="success" @click="addNew">添加商品</Button>
				</Col>
				</Col>
				<Col :span="spanRight">
				<div class="layout-content">
					<Table border :columns="columns7" :data="fliter.list"></Table>
					<br>
					<Row>
						<Col offset="8">
						<Page :total="fliter.total" size="small" show-total show-elevator show-sizer @on-change='onChange' @on-page-size-change='onPageSize'></Page>
						</Col>
					</Row>
				</div>
				</Col>
			</Row>
		</div>
		<Modal v-model="modal6" title="添加商品" @on-ok="asyncOK">
			<Form :model="formLeft" label-position="left" :label-width="100">
				<FormItem label="标题">
					<Input v-model="formLeft.text"></Input>
				</FormItem>
			</Form>
		</Modal>

		<Modal v-model="modal5" title="修改产品数量" @on-ok="okok" width="80%">
			<Form :model="formItem" :label-width="80" style="width:95%">
				<FormItem label="标题">
					<Input v-model="formItem.text" placeholder="请输入" disabled></Input>
				</FormItem>
				<FormItem label="主题">
					<Input v-model="formItem.number" placeholder="请输入"></Input>
				</FormItem>
			</Form>
		</Modal>

	</div>
</template>
<script>
	import Commom from './common/common'
	export default {
		mixins: [Commom],
		data() {
			return {
				models1: 'cate',
				models2: 'makeup',
				catetype: 4,
				paths: [],
				updataid: '',
				formItem: {
					text: '',
					title: '',
					content: '',
				},
				formLeft: {
					text: '',
				},
				columns7: [{
						title: '产品名字',
						key: 'text',
					},
					{
						title: '剩余数量',
						width: 225,
						key: 'number'
					},
					{
						title: '操作',
						key: 'action',
						width: 225,
						align: 'center',
						render: (h, params) => {
							return h('div', [
								h('Button', {
									props: {
										type: 'primary',
										size: 'small'
									},
									style: {
										marginRight: '5px'
									},
									on: {
										click: () => {
											this.show(params.index)
										}
									}
								}, '查看'),
								h('Button', {
									props: {
										type: 'error',
										size: 'small'
									},
									style: {
										marginRight: '5px'
									},
									on: {
										click: () => {
											this.remove(params.index)
										}
									}
								}, '删除'),
							]);
						}
					}
				],
				ids: [],
				modal1: false,
				fliter: {
					list: [],
					total: 0,
					page: 1,
					limit: 13,
					cateId: '',
				}
			}
		},
		computed: {
			iconSize() {
				return this.spanLeft === 5 ? 14 : 24;
			}
		},

		methods: {
			toggleClick() {
				if(this.spanLeft === 5) {
					this.spanLeft = 2;
					this.spanRight = 22;
				} else {
					this.spanLeft = 5;
					this.spanRight = 19;
				}
			},

			onChange(page) {
				this.fliter.page = page;
				this.getData()
			},
			onPageSize(pageSize) {
				this.fliter.limit = page;
				this.getData()
			},
//			productList(rows, i) {
//				this.$http.get('http://localhost:3000/makeup/list')
//					.then(resd => {
//						let ss = resd.data.length
//						for(let j = 0; j < ss; j++) {
//							if(rows[i]._id == resd.data[j].cateId) {
//								this.fliter.list.push(resd.data[j])
//							}
//						}
//					})
//			},
			startTree(rows) {

				let ll = rows.children.length
				for(let i = 0; i < ll; i++) {
					if(rows.children[i].children) {
						this.startTree(rows.children[i])
					} else {
						this.fliter.cateId = rows.id
						console.log(this.fliter)
						this.$http.post('http://localhost:3000/makeup/list', this.fliter).then(
							res => {
								this.fliter.list = res.data.rows
								this.fliter.total = res.data.total
								this.fliter.page = res.data.page
							}
						)
					}
				}
			},
			onSelect(rows) {
				if(rows && rows.length > 0) {
					this.fliter.list = []
					if(rows[0].children) {
						this.startTree(rows[0])
					} else {
						rows[0].text = rows[0].title
						this.fliter.list.push(rows[0])
					}
					this.flag = false
				}

			},
			getData() {
				this.$http.post('http://localhost:3000/makeup/list', this.fliter).then(
					res => {
						this.fliter.list = res.data.rows
						this.fliter.total = res.data.total
						this.fliter.page = res.data.page
					}
				)
			}

		},
			created() {
			this.getData()
		}
	}
</script>